import htoast from '@/components/htoast.vue';
import { createVNode, render, ref, onMounted, onBeforeMount, watch } from 'vue'
import { isEmpty, isFunction, generateUUID, copyJSON } from '@/plugins/util';


const toasts = ref([])
let containerEle;

const initToast = () => {
    if (containerEle == null) {
        containerEle = document.createElement('div');
        containerEle.setAttribute('name', 'htoast')
        document.body.append(containerEle);
        const vnode = createVNode(htoast, {
            toasts: toasts.value,
            delToast: delToast
        })
        render(vnode, containerEle);
    }
    return containerEle;
}

const delToast = (uuid) => {
    let delIndex;
    for (let i = 0; i < toasts.value.length; i++) {
        if (toasts.value[i].uuid === uuid) {
            delIndex = i;
            break;
        }
    }
    toasts.value.splice(delIndex, 1);
}


watch(toasts.value, () => {
    initToast();
    for (let i = 0; i < toasts.value.length; i++) {
        // 转成非ref
        let item = copyJSON(toasts.value[i]);
        item.tipsContentStyle = {};
        item.iStyle = {};

        if (item.status === 1) { // 主要的
            item.iClass = 'fas fa-exclamation';
            item.tipsContentStyle.backgroundColor = '#1976D2';
        } else if (item.status === 2) { // 次要的
            item.iClass = 'fas fa-exclamation';
            item.tipsContentStyle.backgroundColor = '#424242';
        } else if (item.status === 3) { // 成功
            item.iClass = 'fas fa-check';
            item.tipsContentStyle.backgroundColor = '#4CAF50';
        } else if (item.status === 4) { // 信息
            item.iClass = 'fas fa-exclamation';
            item.tipsContentStyle.backgroundColor = '#2196F3';
        } else if (item.status === 5) { // 警告
            item.iClass = 'fas fa-exclamation';
            item.tipsContentStyle.backgroundColor = '#FB8C00';
        } else if (item.status === 6) { // 错误
            item.iClass = 'fas fa-exclamation';
            item.tipsContentStyle.backgroundColor = '#FF5252';
        }
        item.iStyle.color = item.tipsContentStyle.backgroundColor;

        // 增加定时器，到时间后自动删除
        if (!item.isSetAutoDel) {
            setTimeout(() => {
                delToast(item.uuid);
            }, item.duration);
        }
        item.isSetAutoDel = true;

        // toasts.value[i] = item
    }
})

const setToastConfig = (item) => {
    item.tipsContentStyle = {};
    item.iStyle = {};

    if (item.status === 1) { // 主要的
        item.iClass = 'fas fa-exclamation';
        item.tipsContentStyle.backgroundColor = '#1976D2';
    } else if (item.status === 2) { // 次要的
        item.iClass = 'fas fa-exclamation';
        item.tipsContentStyle.backgroundColor = '#424242';
    } else if (item.status === 3) { // 成功
        item.iClass = 'fas fa-check';
        item.tipsContentStyle.backgroundColor = '#4CAF50';
    } else if (item.status === 4) { // 信息
        item.iClass = 'fas fa-exclamation';
        item.tipsContentStyle.backgroundColor = '#2196F3';
    } else if (item.status === 5) { // 警告
        item.iClass = 'fas fa-exclamation';
        item.tipsContentStyle.backgroundColor = '#FB8C00';
    } else if (item.status === 6) { // 错误
        item.iClass = 'fas fa-exclamation';
        item.tipsContentStyle.backgroundColor = '#FF5252';
    }
    item.iStyle.color = item.tipsContentStyle.backgroundColor;

    // 增加定时器，到时间后自动删除
    // if (!item.isSetAutoDel) {
    //     setTimeout(() => {
    //         delToast(item.uuid);
    //     }, item.duration);
    // }

    item.isSetAutoDel = true;
}


const duraDefault = 2000;

export const useToast = () => {

    const defaultToast = (text, duration = duraDefault) => {
        const item = {
            uuid: generateUUID(),
            text: text,
            status: 1,
            duration,
        }
        setToastConfig(item)
        toasts.value.push(item);
        setTimeout(() => {
            delToast(item.uuid);
        }, item.duration);
    }

    const successToast = (text, duration = duraDefault) => {
        const item = {
            uuid: generateUUID(),
            text: text,
            status: 3,
            duration,
        }
        setToastConfig(item)
        toasts.value.push(item);
        setTimeout(() => {
            delToast(item.uuid);
        }, item.duration);
    }

    const infoToast = (text, duration = duraDefault) => {
        const item = {
            uuid: generateUUID(),
            text: text,
            status: 4,
            duration,
        }
        setToastConfig(item)
        toasts.value.push(item);
        setTimeout(() => {
            delToast(item.uuid);
        }, item.duration);
    }

    const errorToast = (text, duration = duraDefault) => {
        const item = {
            uuid: generateUUID(),
            text: text,
            status: 6,
            duration,
        }
        setToastConfig(item)
        toasts.value.push(item);
        setTimeout(() => {
            delToast(item.uuid);
        }, item.duration);
    }

    const warningToast = (text, duration = duraDefault) => {
        const item = {
            uuid: generateUUID(),
            text: text,
            status: 5,
            duration,
        }
        setToastConfig(item)
        toasts.value.push(item);
        setTimeout(() => {
            delToast(item.uuid);
        }, item.duration);
    }

    return {
        defaultToast,
        successToast,
        infoToast,
        errorToast,
        warningToast
    }

}
